<script setup lang="ts">
import { Download } from '@vben/icons';
import { useRoute } from 'vue-router'
import { getCertifiedApi } from "#/api/certificate/list"
import { onMounted, ref } from 'vue';
import { downloadFile } from "#/utils/obs"
import PDF from "#/components/pdf.vue"
import { $t } from '@vben/locales';

const route = useRoute()
const data = ref<any>({})
const obs = ref({ Key: '' })

const download = () => { 
  downloadFile(obs.value)
}
const getCert = () => {
  //@ts-ignore
  let { name, idCard, certificateNumber } = route.query ?? {}
  if (idCard && name && certificateNumber) {
    getCertifiedApi({ name, idCard, certificateNumber }).then(res => {
      data.value = res
      const { certificate } = res
      obs.value.Key = certificate
    })
  }
}
const infos = [
  { name: $t('certResult.name'), prop: 'nameCn' },
  { name: $t('certResult.idCard'), prop: 'idCard' },
  { name: $t('certResult.phone'), prop: 'phone' },
  { name: $t('certResult.certificationName'), prop: 'certificationName' },
  { name: $t('certResult.certificateNumber'), prop: 'certificateNumber' },
  { name: $t('certResult.certificateType'), prop: 'certificateType' },
  { name: $t('certResult.examinationVenue'), prop: 'examinationVenue' },
  { name: $t('certResult.issueDate'), prop: 'meansTime' },
  { name: $t('certResult.validUntil'), prop: 'validTime' },
]
onMounted(() => {
  getCert()
})
</script>
<template>
  <div class="cert-result h-full w-[100%] ">
    <div class="container flex h-full w-[100%] flex-col items-center bg-[#fff] overflow-auto">
      <h1 class="result pb-[50px] pt-[50px] text-[35px] font-[600]">
        {{ $t('certResult.queryResult') }}
      </h1>
      <div class="title flex w-full items-center">
        <!-- <CircleAlert class="icon"/> -->
        {{ $t('certResult.certificationInfo') }}
      </div>
      <div class="info w-full pb-[15px] pl-[35px] pr-[35px] pt-[15px]">
        <el-descriptions :column="3">
          <el-descriptions-item :label="`${item.name}:`" v-for="item in infos">{{ data[item.prop]
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="title flex w-[100%] items-center justify-between">
        <!-- <CircleAlert class="icon"/> -->
        <span>{{ $t('certResult.electronicCertificate') }}</span>
        <Download class="icon" @click="download"></Download>
      </div>
      <PDF :obs="obs"></PDF>
    </div>
  </div>
</template>
<style lang="less" scoped>
.icon {
  margin-right: 5px;
  cursor: pointer;
}

.icon:hover {
  color: var(--el-color-primary);
}

.title {
  color: #fff;
  padding: 10px;
  background-color: #91d5ff;
  border-radius: 5px;
}
</style>
